<template>
  <div style="height: 100%;">
    <el-container style="height: 100%">
      <el-aside :width="sideWidth + 'px'"
        style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%); height: 100%;">
        <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>
      </el-aside>

      <el-container>
        <el-header style=" border-bottom: 1px solid #ccc;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"></Header>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
import router from "@/router";
const axios = require('axios');
export default {
  name: 'HomeView',
  data() {
    return {
      u_name: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      form: {},
      formX: {},
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      dialogFormVisible: false,
      multipleSelection: [],
      deleteIds: [],
      n: 0
    }
  },
  
  components:{
    Aside,
    Header,
    router
},
  methods: {
    collapse() {
        this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.collapseBtnClass = 'el-icon-s-unfold';
        this.sideWidth = 64;
        this.logoTextShow = false;
      } else {
        this.collapseBtnClass = 'el-icon-s-fold';
        this.sideWidth = 200;
        this.logoTextShow = true;
      }
    }
    
  }
}
</script>
<style></style>
